<template>
    <view class="container" :style="themeColor">
        <view class="main">
            <image class="shopImg" :src="easyGetImgUrl(shopImgFirst)" mode="aspectFill"></image>
            <view class="shop-info-box">
                <view class="flex">
                    <image class="logo" :src="easyGetUserImgUrl(data.Logo)"></image>
                    <view class="">
                        <view class="shop-name">{{ data.ShopName }}</view>
                        <view class="shop-tag" v-if="tagNameList && tagNameList.length > 1">
                            <text class="shop-tag-item" v-for="(item, index) in tagNameList" :key="index">{{
                                item
                            }}</text>
                        </view>
                    </view>
                </view>
                <view class="shop-info" v-if="data.BusinessHours">
                    <view class="label">营业时间：</view>
                    <view class="value">{{ data.BusinessHours }}</view>
                </view>
                <view class="shop-info" v-if="data.ContactName">
                    <view class="label">联系人：</view>
                    <view class="value">{{ data.ContactName }}</view>
                </view>
                <view class="shop-info" v-if="data.ContactTel">
                    <view class="label">联系电话：</view>
                    <view class="value color-primary" @click="makePhoneCall(data.ContactTel)">{{
                        data.ContactTel
                    }}</view>
                </view>
                <view
                    class="shop-info"
                    v-if="
                        data.LongAddress &&
                        data.LongAddress != null &&
                        data.LongAddress != 'null' &&
                        data.LongAddress != 'undefined' &&
                        data.LongAddress != undefined
                    ">
                    <view class="label">门店地址：</view>
                    <view class="value">{{ data.LongAddress }}</view>
                </view>
            </view>
            <view class="shop-description">
                <view class="title"> 商家介绍 </view>
                <!-- <view class="description"
					v-if="data.Description&&data.Description!=null&&data.Description!='null'&&data.Description!='undefined'&&data.Description!=undefined">
					{{data.Description}}
				</view> -->
                <view class="description" v-for="(item, index) in descriptionList" :key="index">{{ item }}</view>
                <view class="" v-if="shopImgList && shopImgList.length > 0">
                    <image
                        class="description-img"
                        v-for="(item, index) in shopImgList"
                        :src="easyGetImgUrl(item)"
                        mode="widthFix"></image>
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <view class="btn-left" @click="makePhoneCall(data.ContactTel)">
                <iconsfont customIcons="icon-dianhua1" class="color-primary" size="32"></iconsfont>
                <view class="text">咨询门店</view>
            </view>
            <view
                class="btn btn-success"
                :class="data.MiniAppId ? '' : 'btn-disabled'"
                @click="gotoMiniProgram(data.MiniAppId)"
                >进入小程序</view
            >
        </view>
    </view>
</template>

<script>
import { GetMiniappApply } from "@/service/api/miniApp.js"
export default {
    data() {
        return {
            data: {},
            shopImgFirst: "",
            shopImgList: [],
            tagNameList: [],
            descriptionList: [],
        }
    },
    onLoad(e) {
        this.GetMiniappApply(e.id)
    },
    methods: {
        GetMiniappApply(id) {
            GetMiniappApply(id).then((res) => {
                const that = this
                if (res.State == 1) {
                    that.data = res.Data
                    if (that.data.ShopName) {
                        uni.setNavigationBarTitle({
                            title: that.data.ShopName,
                        })
                    }
                    that.data.LongAddress =
                        that.data.ProvinceName ||
                        "" + that.data.CityName ||
                        "" + that.data.AreaName ||
                        "" + that.data.StreetName ||
                        "" + that.data.Address ||
                        ""
                    if (res.Data.TagNames) {
                        that.tagNameList = res.Data.TagNames.split(",")
                    }
                    if (res.Data.ShopSignImgs) {
                        that.shopImgList = res.Data.ShopSignImgs.split(",")
                    }
                    if (res.Data.Description) {
                        if (res.Data.Description.indexOf("\n") >= 0) {
                            const arr = res.Data.Description.split("\n")
                            arr.forEach(function (item) {
                                if (item) {
                                    that.descriptionList.push(item)
                                }
                            })
                        } else {
                            that.descriptionList.push(res.Data.Description)
                        }
                    } else {
                        that.descriptionList = []
                    }
                    if (that.shopImgList.length > 0) {
                        that.shopImgFirst = that.shopImgList[0]
                        that.shopImgList.splice(0, 1)
                    }
                }
            })
        },
        makePhoneCall(phoneNumber) {
            uni.makePhoneCall({
                phoneNumber: phoneNumber,
            })
        },
        gotoMiniProgram(appId) {
            if (appId) {
                uni.navigateToMiniProgram({
                    appId: appId,
                })
            } else {
                this.easyToast("当前商家没有小程序")
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.main {
    padding-bottom: 130rpx;
    border-radius: $border-radius-10;
    margin-bottom: constant(safe-area-inset-bottom);
    /*兼容 IOS<11.2*/
    margin-bottom: env(safe-area-inset-bottom);
    /*兼容 IOS>11.2*/
}

.shopImg {
    width: 100%;
    height: 350rpx;
}

.shop-info-box {
    border-bottom: 1rpx solid #ebebeb;
    padding: 40rpx;

    .flex {
        display: flex;
        align-items: center;

        .logo {
            width: 128rpx;
            height: 128rpx;
            border-radius: 24rpx;
            margin-right: 40rpx;
            flex-shrink: 0;
        }

        .shop-name {
            font-size: 36rpx;
            font-family:
                PingFangSC-Medium,
                PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 50rpx;
        }

        .shop-tag {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20rpx;
            max-height: 44rpx;
            overflow: hidden;
        }

        .shop-tag-item {
            color: #ffa321;
            font-size: 22rpx;
            line-height: 22rpx;
            margin-top: 10rpx;
            padding: 8rpx 8rpx;
            border-radius: 4rpx;
            margin-right: 12rpx;
            background: rgba(255, 163, 33, 0.1);
        }
    }

    .shop-info {
        margin-top: 20rpx;
        display: flex;
        color: #666;
        font-size: 24rpx;

        .label {
            width: 140rpx;
            text-align: justify;
            text-align-last: justify;
            text-justify: inter-ideograph;
        }
    }
}

.shop-description {
    margin: 32rpx 40rpx;

    .title {
        font-size: 32rpx;
        font-weight: 600;
    }

    .description {
        margin-top: 16rpx;
        font-size: 28rpx;
        color: #666;
    }

    .description-img {
        width: 100%;
        margin-top: 24rpx;
    }
}

.bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn-left {
        flex: 1;
        text-align: center;

        .text {
            font-size: 24rpx;
        }
    }

    .btn-success {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        width: 300rpx;
    }
    .btn-disabled {
        background: #efefef;
        border: 1rpx solid #efefef;
    }
}

.color-primary {
    color: $app-color-main;
}
</style>
